<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>个人中心</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        .main-body-area{margin-top: 0}
        .person-head-area{
            padding: 0 0 0.3rem 0;
            width: 100%;
            height: auto;
            background-color: #F23A38;
        }
        .person-info-box{
            color: white;
            text-align: center;
            height: 100%;
            width: 60%;
            margin: auto;
            /*background-color: #2f4798;*/
            position: relative;
        }
        .person-img-area{
            display: block;
            border: none;
            border-radius: 100%;
            width: 1.2rem;
            height: 1.2rem;
            margin: auto;
            position: relative;
            overflow: hidden;
        }
        .person-img{
            width: 100%;
            height: 100%;
        }
        .info-detail-show{
            line-height: 0.5rem;
            height: 0.5rem;
            width: auto;
            text-align: center;
            padding-top: 0.2rem;
            font-size: 0.28rem;
            margin: auto;
            position: relative;
        }

        /*功能列表*/
        .option-list-area{
            background-color: #f8f8f8;
            height: auto;
            width: 100%;
            position: relative;
            margin-bottom: 3rem;
        }
        .option-list{
            display: inline-block;
            margin: 0.2rem 0 0.4rem 0;
            width: 100%;
            height: auto;
            border-bottom: 1px solid  #e3e3e3;
        }
        .option-list li{
            background-color: white;
            position: relative;
            height: 1rem;
            width: 100%;
            line-height: 1.1rem;
            border-top: 1px solid #e3e3e3;
            background-repeat: no-repeat;
            background-position: 0.4rem 0.38rem;
            background-size: 0.4rem;
        }
        .option-list-one li{
            background-color: white;
            position: relative;
            height: 1rem;
            width: 100%;
            line-height: 1.1rem;
            border-top: 1px solid #e3e3e3;
            background-repeat: no-repeat;
            background-position: 0.4rem 0.3rem;
            background-size: 0.4rem;
        }

        .option-list li a,.option-list-one li a{
            font-size: 0.28rem;
            color: #666;
            line-height: 1.1rem;
            width: 80%;
            height: 100%;
            display: inline-block;
            padding-left: 20%;
            background-image: url(../../img/toPage.png);
            background-repeat: no-repeat;
            background-position: 7rem 0.5rem;
            background-size: 0.15rem;
        }
        .personCenter-box{
            text-align: center;
            padding: 0.25rem 0;
            width: 100%;
            height: 0.5rem;
        }
        .personCenter-box ul{
            position: relative;
            font-size: 0.32rem;
            height: 100%;
            width: 90%;
            margin: auto;
            line-height: 0.56rem;
            color: white;
        }
        .show-name,.show-level,.show-integral{
            display: inline-block;
        }
        .show-name{
            float: left;
            width: 35%;
            text-align: right;
        }
        .show-level{
            text-align: center;
            width: 30%;
        }
        .show-integral{
            text-align: left;
            width: 35%;
            float: right;
        }
        .count-box{
            width: 60%;
            height: 0.8rem;
            margin: auto;
            padding: 0.4rem 0 0 0;
        }
        .count-box ul{height: 100%;width: 100%}
        .info-count-show,.info-ratio-show,.info-num-show{
            float: left;width: 33.33%;text-align: center;
            font-size: 0.28rem;line-height: 0.8rem;
            background-size: 0.4rem;background-position: 0.1rem center;
            background-repeat: no-repeat;
        }
        .info-count-show{background-image: url("../../img/tuku@2x.png")}
        .info-ratio-show{background-image: url("../../img/tuku@2x.png")}
        .info-num-show{background-image: url("../../img/tuku@2x.png")}
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>

<!--主体-->
<div class="main-body-area">

    <div class="person-head-area">
       <div class="personCenter-box">
            <ul>
                <li>个人中心</li>
            </ul>
       </div>
        <div class="person-info-box">
            <button class="person-img-area">
                <img class="person-img" src="../../img/logo.png">
            </button>
            <ul>
                <li class="info-detail-show">
                    <span class="show-name">关小龙</span>
                    <span class="show-level">lv.255</span>
                    <span class="show-integral">(积分 200)</span>
                </li>
            </ul>
        </div>
        <div class="count-box">
            <ul>
                <li class="info-count-show">6.3</li>
                <li class="info-ratio-show">96%</li>
                <li class="info-num-show">602</li>
            </ul>
        </div>
    </div>
    <div class="option-list-area">
        <ul class="option-list">
            <li style="background-image: url('../../img/qiyerenzheng@2x.png')">
                <a href="#">认证管理</a>
            </li>
            <li style="background-image: url('../../img/wodeqianbao@2x.png')">
                <a href="#">我的钱包</a></li>
            <li style="background-image: url('../../img/wodeyaoqing@2x.png')">
                <a href="#">我的邀请</a></li>
            <li style="background-image: url('../../img/tuikuan@2x.png')">
                <a href="#">我的退款</a></li>

        </ul>
        <ul class="option-list-one">
            <li style="background-image: url('../../img/tuku@2x.png')">
                <a href="#">完工照片</a></li>
            <li style="background-image: url('../../img/shoucang-shifuxinxi@2x.png')">
                <a href="#">投诉记录</a></li>
            <li style="background-image: url('../../img/xinwenhuodong@2x.png')">
                <a href="#">新闻活动</a></li>
        </ul>
        <ul class="option-list">
            <li style="background-image: url('../../img/nimashezhi@2x.png')">
                <a href="#">设置</a></li>
        </ul>
    </div>

</div>
<!--底部导航-->

<div class="bottom-nav-area">
    <ul>
        <li>
            <a class="home" href="#">首页</a>
        </li>
        <li>
            <a class="order" href="#">订单</a>
        </li>
        <li>
            <a class="information" href="#">消息</a>
        </li>
        <li>
            <a class="mine mineEd" href="#">我的</a>
        </li>
    </ul>
</div>

</body>
</html>